<template>
  <div class="home_main">
      <div class="form_m">
        <Form ref="formCustom" :model="formData" :rules="ruleCustom">
          <div class="con_item">
            <FormItem prop="value1">
                  <span class="name_t">单位名称</span>
                  <Input v-model="formData.value1" class="inp" placeholder='填写单位名称'></Input>
            </FormItem>
          </div>
          <div class="con_item">
            <FormItem prop="value2">
                  <span class="name_t">管理员姓名</span>
                  <Input type="text" v-model="formData.value2" class="inp" placeholder='填写管理员姓名'></Input>
            </FormItem>
          </div>
          <div class="con_item">
            <FormItem prop="value3">
                  <span class="name_t">管理员身份证号</span>
                  <Input type="text" v-model="formData.value3" class="inp" placeholder='填写管理员身份证号'></Input>
            </FormItem>
          </div>
          <!-- <div class="con_item">
            <FormItem prop="value4">
                  <span class="name_t">申请公函</span>
                  <Input type="text" v-model="formData.value4" class="inp" placeholder='填写申请公函'></Input>
            </FormItem>
          </div>
          <div class="con_item">
            <FormItem prop="value5">
                  <span class="name_t">事业单位法人证书</span>
                  <Input type="text" v-model="formData.value5" class="inp" placeholder='填写事业单位法人证书'></Input>
            </FormItem>
          </div> -->
          <div class="con_item">
            <FormItem prop="value6">
                  <span class="name_t">机构类型</span>
                  <Select v-model="formData.value6" style="width:3rem" size="large" @on-change="btnSelect">
                      <Option v-for="item in cityList" :value="item.dictName" :key="item.dictName">{{ item.dictName }}</Option>
                  </Select>
            </FormItem>
          </div>
        </Form>
      </div>
      <div class="business_license" v-for="item,index in list">
        <div class="content">
          <div class="title">{{item.title}}</div>
          <div class="flex">
            <img-inputer v-for="child,n in item.chil" auto-upload :action="imgUrl+'/image-upload/upload-image'" ali-icon='&#xe608;' :placeholder="child.value" theme="material" :img-src='child.img' accept="image/jpeg,image/png" :on-success="(res,file)=>{btnImg(res,file,index,n)}" />
          </div>
        </div>
      </div>
      <div class="btn" @click="handleSubmit('formCustom')">{{flag ? '重新提交':'完成'}}</div>
    </div>
</template>
<script>
import ImgInputer from "vue-img-inputer";
import "vue-img-inputer/dist/index.css";

export default {
  components: {
    ImgInputer
  },
  data() {
    // 企业名称
    const valiName = (rule, value, callback) => {

        this.$http.post(this.baseUrl +'/userApplyBA/checkBusinessName',{
          id:this.id,
          businessName:this.formData.value1
        }).then(data=>{
            if (data.data.result == 2) {
                callback(new Error(data.data.message));
            } else {
                callback();
            }
        }).catch(err=>{
            console.log(err)
        });
    };
    const valideNum = (rule, value, callback) => {
            console.log(value);
            // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
            var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            let flag = reg.test(value);

            if (!flag) {
                callback(new Error('身份证输入不合法'));
            } else {
                callback();
            }
        };
    return {
      id:null,//修改的时候验证名字用
      flags:'',//修改时用
      cityList: [], //机构类型
      businessType: "", //选中的机构类型id
      // 表单里数据
      formData: {
        value1: "", // 单位名称
        value2: "", // 管理员姓名
        value3: "", // 管理员身份证号
        // value4: "", // 申请公函
        // value5: "" //事业单位法人证书
      },
      ruleCustom: {
        value1: [
          { required: true, message: "单位名称不能为空",  trigger: 'blur'},
          { required: true, validator: valiName, trigger: 'blur' }
        ],
        value2: [
          { required: true, message: "管理员姓名不能为空", trigger: "blur" }
        ],
        value3: [
          { required: true, message: "管理员身份证号不能为空", trigger: "blur" },
          { required: true, validator: valideNum, trigger: 'blur' }
        ],
        // value4: [
        //   { required: true, message: "申请公函不能为空", trigger: "blur" }
        // ],
        // value5: [
        //   {
        //     required: true,
        //     message: "事业单位法人证书不能为空",
        //     trigger: "blur"
        //   }
        // ],
        value6: [
          { required: true, message: "请选择机构类型", trigger: "change" }
        ]
      },
      list: [
        {
          title: "公司营业执照",
          chil: [
            {
              img: "",
              value: "点击上传"
            }
          ]
        },
        {
          title: "授权书",
          chil: [
            {
              img: "",
              value: "点击上传"
            }
          ]
        },
        {
          title: "代理人身份证正反面",
          chil: [
            {
              img: "",
              value: "身份证正面"
            },
            {
              img: "",
              value: "身份证反面"
            }
          ]
        },
        {
          title: "申请公函",
          chil: [
            {
              img: "",
              value: "点击上传"
            }
          ]
        },
        {
          title: "事业单位法人证书",
          chil: [
            {
              img: "",
              value: "点击上传"
            }
          ]
        },
      ]
    };
  },
  computed: {
    baseUrl() {
      return "http://192.168.1.132:8082";
    },
    imgUrl() {
      return "http://192.168.1.104:8082";
    },
    flag(){
      return this.$route.query.type == 'audit'
    }
  },
  methods: {
    handleSubmit(name) {
      console.log(this.formData);
      this.$refs[name].validate(valid => {
        if (valid) {
          this.test();
        } else {
          // this.$Message.error("错误");
          alert("资料填写有误！");
        }
      });
    },
    btnImg(res, file, index, n) {
      console.log("成功");
      this.list[index].chil[n].img = res.message;
    },
    test() {
      let onOff = true;
      this.list.forEach(item => {
        item.chil.forEach(child => {
          if (child.img == "") {
            onOff = false;
          }
        });
      });
      if (onOff == false) {
        alert("请完善资料！！！");
        return;
      }
      //判断是申请还是审核状态
      console.log(this.flag);
      let url = this.flag ? '/companyAccount/companyCheckOperate':'/userApplyBA/checkAddBusinessAccount';

      let obj ={
          userId:this.$route.query.uid,
          businessName: this.formData.value1,
          adminName: this.formData.value2,
          idCard: this.formData.value3,
          businessType: this.businessType,
          businessLicenseImg: this.list[0].chil[0].img,
          authImg: this.list[1].chil[0].img,
          idCardImg: this.list[2].chil[0].img,
          idCardBackImg: this.list[2].chil[1].img,
          officialLetter: this.list[3].chil[0].img,
          publicLegalPerson:this.list[4].chil[0].img,
      }
      let atter={
        state:1,
        id:this.id,
        flag:this.flags
      }
      let param = this.flag ? Object.assign(obj,atter) : obj
      this.$http
        .post(this.baseUrl + url, param)
        .then(data => {
          console.log(data);
          if (data.data.result == 1) {
                alert(data.data.message);
                window.webkit.messageHandlers.timefor.postMessage();
                android.show()
            } else {
                alert(data.data.message);
            }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getType() {
      //获取机构类型
      this.$http
        .post(this.baseUrl + "/systemDict/selectDictType", {
          dictType: "'business_type'"
        })
        .then(data => {
          console.log(data);
          this.cityList = data.data;

          //判断当前申请还是审核，如flag 为true,则为审核中
          console.log(this.flag);
          if(this.flag){
            this.getInfo()
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    btnSelect(val) {
      //点击机构类型
      console.log(val);
      this.cityList.forEach(item => {
        if (item.dictName == val) {
          this.businessType = item.dictCode;
        }
      });
    },
    //审核失败时查询资料信息
    getInfo(){
      this.$http.get(this.baseUrl + '/userApplyBA/findUserBusiness/'+this.$route.query.uid).then(data=>{
          console.log(data)
          this.id = data.data.id
          this.flags = data.data.flag
          this.formData.value1=data.data.businessName
          this.formData.value2=data.data.adminName
          this.formData.value3=data.data.idCard
          this.businessType=data.data.businessType
    
          this.list[0].chil[0].img= data.data.businessLicenseImg
          this.list[1].chil[0].img= data.data.authImg
          this.list[2].chil[0].img= data.data.idCardImg
          this.list[2].chil[1].img=data.data.idCardBackImg
          this.list[3].chil[0].img=data.data.officialLetter
          this.list[4].chil[0].img=data.data.publicLegalPerson

          this.cityList.forEach(item=>{
            if(item.dictCode == this.businessType){
                this.formData.value6 = item.dictName
            }
          })
      }).catch(err=>{
          console.log('网络连接失败！')
      });
    }
  },
  mounted() {
    this.getType();
  }
};</script>
<style lang="less">
 @import "./home.less";
</style>
